<template>
    <div>
        <div class="didan">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>       
           <h1>快递单评价</h1>
           <button @click="tijiao">提交</button>
        </div>
        <div class="zongpingfen">
            <div class="zongpingfenone">
                <p>总体评分</p>
            </div>
            <div class="zongpingfentwo">
                <span>{{ Val*2}}分</span>
            </div>
            <div class="zongpingfensan">
                <van-rate v-model=" Val" icon="like" void-icon="like-o" />
            </div>
        </div>
        <div class="dianpu">
          <h2>店铺评分</h2>
          <ul>
              <li><span>店铺评分</span><van-rate
  v-model="value1"
  :size="25"
  color="#ffcf60"
  void-icon="star"
  void-color="#eee"
/></li>
              <li>  <span> 物流速度</span><van-rate
  v-model="value2"
  :size="25"
  color="#ff8d5b"
  void-icon="star"
  void-color="#eee"
/></li>
              <li>     <span>快递评分</span><van-rate
  v-model="value3"
  :size="25"
  color="#ff5d5e"
  void-icon="star"
  void-color="#eee"
/>  </li>
          </ul>
        </div>
        <div class="wenben">
            <textarea v-model="textr">写几句评论</textarea>
        </div>
       <!--  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  
</van-swipe> -->
    </div>
    
</template>

<script>
import  {GetstarDate} from "@/request/api"
export default {
    name:"ExpressOrderEvaluation",
    data () {
        return {
            value1: 3,
            value2: 3,
            value3: 3,
           textr:"写几句评论"
        }
    },
    methods:{
        tijiao(){
  GetstarDate({
           shop:this.value1 ,
           logistics:this.value2,
           express:this.value3,
           totalScore:this.Val*2,
         /*   shop:3 ,
           logistics:3,
           express:3,
           totalScore:6, */
           orderCode:this.$route.params.item,
           id:this.$route.params.id,
           info:this.textr
        }).then((res)=>{
            if(res.data.errCode==0){
                this.$router.push("/kuaitidan")
            }
            console.log("评价成功的数据:",res);
        })
        }
    },
    computed:{
        Val:{
            get(){
                return parseInt((this.value1+this.value2+this.value3)/3) 
            },
            set(){

            }
        }
    }
}
</script>
 
<style lang = "less" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
    .didan{
      height: .6rem;
      line-height: .6rem;
      background: #003399;
      color: white;
      font-size: .14rem;
      display: flex;
    align-items: center;
    padding: 0 .15rem;
    h1{
        flex: 1;
        text-align: center;
    }
    .van-icon{
        /* width: .5rem; */
    }
    button{
        /* width: .5rem; */
         background: #003399;
         border: none;
    }
    }
    .zongpingfen{
        font-size: .14rem;
        text-align: center;
        div{
            height: .5rem;
            line-height: .5rem;
            background-color: #fff;
           
        }
        .zongpingfenone{
            color: #aaaaaa ;
        }
        .zongpingfentwo{
            color: #ffcc33;
            font-size: .25rem;
        }
    }
    .dianpu{
        font-size: .14rem;
        background: #fff;
        padding: 0 .15rem;
        h2{
                height: .5rem;
    line-height: .5rem;
        }
        ul{
            li{
                height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    align-items: center;
    /* margin-right: .25rem; */
    justify-content: space-around;
            }
        }
    }
    .wenben{
        font-size: .14rem;
        width: 100%;
        margin-top: .15rem;
        
        textarea{
              width: 100%;
              overflow: hidden;
              border: none;
              height: 1.4rem;
              display: block;
              padding: .15rem;
              color: #cccccc;

        }

    }
</style>